<template>
  <div class="dataAssociationVC">
    <el-row>
      <el-col>
        <!-- 操作区域 -->
        <upper-template @search="queryBtn" @clear="resetBtn">
          <!-- 左侧按钮 -->
          <template slot="buttonArea">
            <el-button @click="addFunc">新增</el-button>
            <el-button @click="editFunc">编辑</el-button>
            <el-button @click="delFunc">删除</el-button>
          </template>
          <!-- 搜索区 -->
          <template slot="searchArea">
            <el-form
              :model="searchForm"
              ref="searchForm"
              label-width="120px"
              label-position="left"
              size="mini"
            >
              <el-form-item label="校验实体标识：">
                <el-input
                  v-model="searchForm.entityCode"
                  placeholder="请输入校验实体标识"
                ></el-input>
              </el-form-item>
              <el-form-item label="关联表名：">
                <el-input
                  v-model="searchForm.referenceTableName"
                  placeholder="请输入关联表名"
                ></el-input>
              </el-form-item>
              <el-form-item label="关联表字段名：">
                <el-input
                  v-model="searchForm.referenceColumnName"
                  placeholder="请输入关联表字段名"
                ></el-input>
              </el-form-item>
            </el-form>
          </template>
          <!-- 显示隐藏区 -->
          <template slot="columnHide">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="item in textData"
                :label="item.label"
                :key="item.prop"
                >{{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </template>
        </upper-template>

        <!-- 列表 -->
        <el-table
          ref="multipleTable"
          :data="tableData"
          stripe
          @row-click="authorizeFor"
        >
          <el-table-column
            width="55"
            type="selection"
            
          ></el-table-column>
          <el-table-column
            prop="entityCode"
            label="校验实体标识"
            align="left"
            v-if="columnState[0]"
            show-overflow-tooltip 
          >
          </el-table-column>
          <el-table-column
            prop="referenceTableName"
            label="关联表名"
            align="left"
            show-overflow-tooltip 
            v-if="columnState[1]"
          >
          </el-table-column>
          <el-table-column
            prop="referenceTableComment"
            label="关联表描述(用于回显提示)"
            show-overflow-tooltip 
            v-if="columnState[2]"
          >
          </el-table-column>
          <el-table-column
            prop="referenceColumnName"
            label="关联表字段名"
            show-overflow-tooltip 
            v-if="columnState[3]"
          >
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @refresh="searchFunc"
          :current-page="searchForm.page"
           :page-size="searchForm.size"
          :total="total"
        ></pagination>
      </el-col>
    </el-row>
    <!-- 新增/编辑 -->
    <el-dialog
      v-dialogDrag
      :title="saveTitles[saveFlg - 1] + 'CPM数据引用校验表信息'"
      :visible.sync="addOrEdit"
      width="560px"
      top="5%"
    >
      <el-form
        :model="saveForm"
        ref="addTreeForm"
        label-width="200px"
        label-position="right"
        :rules="saveFormRules"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="校验实体标识："
              style="width:500px;"
              prop="entityCode"
            >
              <el-input v-model="saveForm.entityCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="关联表名："
              style="width:500px;"
              prop="referenceTableName"
            >
              <el-input v-model="saveForm.referenceTableName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="关联表描述(用于回显提示)："
              style="width:500px;"
              prop="referenceTableComment"
            >
              <el-input v-model="saveForm.referenceTableComment"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="关联表字段名："
              style="width:500px;"
              prop="referenceColumnName"
            >
              <el-input v-model="saveForm.referenceColumnName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="confirmTne">确 定</el-button>
        <el-button @click="cancelTne">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { publicManage_dat } from "@/api/index";
export default {
  data() {
    return {
      addOrEdit: false,
      total: 50,
      saveFlg: 1,
      saveTitles: ["新增", "编辑"],
      searchForm: {
        //校验实体标识
        entityCode: "",
        //关联表字段名
        referenceColumnName: "",
        //关联表名
        referenceTableName: "",
        pageNo: 1,
        pageSize: 15
      },
      saveForm: {
        entityCode: "",
        referenceTableName: "",
        referenceColumnName: "",
        referenceTableComment: ""
      },
      saveFormRules: {
        entityCode: [
          {
            required: true,
            message: "该输入项为必输项",
            trigger: "blur"
          },
          {
            pattern: /^[\u4E00-\u9FA5A-Za-z0-9_]{1,50}$/,
            message: "只能输入1-50位汉字、英文字母、数字、下划线",
            trigger: "blur"
          }
        ],
        referenceTableName: [
          {
            required: true,
            message: "该输入项为必输项",
            trigger: "blur"
          },
          {
            pattern: /^[\u4E00-\u9FA5A-Za-z0-9_]{1,50}$/,
            message: "只能输入1-50位汉字、英文字母、数字、下划线",
            trigger: "blur"
          }
        ],
        referenceColumnName: [
          {
            required: true,
            message: "该输入项为必输项",
            trigger: "blur"
          },
          {
            pattern: /^[\u4E00-\u9FA5A-Za-z0-9_]{1,50}$/,
            message: "只能输入1-50位汉字、英文字母、数字、下划线",
            trigger: "blur"
          }
        ],
        referenceTableComment: [
          {
            required: true,
            message: "该输入项为必输项",
            trigger: "blur"
          },
          {
            pattern: /^[\u4E00-\u9FA5A-Za-z0-9_]{1,50}$/,
            message: "只能输入1-50位汉字、英文字母、数字、下划线",
            trigger: "blur"
          }
        ]
      },
      checkList: [
        "校验实体标识",
        "关联表名",
        "关联表描述(用于回显提示)",
        "关联表字段名"
      ],
      textData: [
        { prop: "entityCode", label: "校验实体标识" },
        { prop: "referenceTableName", label: "关联表名" },
        {
          prop: "referenceTableComment",
          label: "关联表描述(用于回显提示)"
        },
        { prop: "referenceColumnName", label: "关联表字段名" }
      ],
      tableData: []
    };
  },
  created() {
    this.searchFunc();
  },
  computed: {
    columnState() {
      let arr = [],
        arr1 = this.textData,
        arr2 = this.checkList;
      for (let i = 0; i < arr1.length; i++) {
        let flg = false;
        for (let j = 0; j < arr2.length; j++) {
          if (arr1[i].label === arr2[j]) {
            flg = true;
          }
        }
        arr.push(flg);
      }
      return arr;
    }
  },
  mounted() {},
  watch: {
    addOrEdit() {
      // 窗口打开或关闭清除校验结果
      if (this.$refs.addTreeForm) {
        this.$refs.addTreeForm.clearValidate();
      }
    }
  },
  methods: {
    //顶部左侧按钮
    addFunc() {
      this.saveFlg = 1;
      for (let k in this.saveForm) {
        this.saveForm[k] = "";
      }
      this.addOrEdit = true;
    },
    editFunc() {
      this.saveFlg = 2;
      let selection = this.$refs.multipleTable.selection;
      if (selection.length != 1) {
        return this.$message.warning("请选择一条数据进行修改");
      }
      let row = selection[0];
      let form = { ...row };
      this.saveForm = form;
      this.addOrEdit = true;
    },
    delFunc() {
      let selection = this.$refs.multipleTable.selection;
      if (selection.length < 1) {
        return this.$message.warning("请选择要删除的数据");
      }
      this.$confirm("您确定要删除选中数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const paramData = [];
          selection.forEach(element => {
            paramData.push(element.id);
          });
          publicManage_dat
            .dataAssociationRemove({ ids: paramData.join() })
            .then(res => {
              this.$message({
                message: res.message,
                type: "success"
              });
              this.searchFunc();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //搜索操作按钮
    queryBtn() {
      this.searchForm.pageNo=1;
      this.searchFunc();
    },
    resetBtn() {
      this.searchForm = {
        entityCode: "",
        referenceColumnName: "",
        referenceTableName: ""
      };
    },
    //新增编辑确定取消
    confirmTne() {
      this.$refs.addTreeForm.validate(valid => {
        if (valid) {
          publicManage_dat.dataAssociationSave(this.saveForm).then(res => {
            this.$message({
              message: res.message,
              type: "success"
            });
            this.searchFunc();
            this.addOrEdit = false;
          });
        }
      });
    },
    cancelTne() {
      this.addOrEdit = false;
    },
    //点击行选中
    authorizeFor(row) {
      if (this.$refs.multipleTable) {
        this.$refs.multipleTable.clearSelection();
      }
      this.$refs.multipleTable.toggleRowSelection(row, true);
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.searchForm.pageSize = val;
      this.searchFunc();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.searchForm.pageNo = val;
      this.searchFunc();
    },
    //查询
    searchFunc() {
      publicManage_dat.dataAssociationQuery(this.searchForm).then(res => {
        this.tableData = res.data;
        this.total = res.count;
      });
    }
  }
};
</script>